<template>
	<view class="tpl-product-one" :class="'tpf-product-arrange-'+arrange">
		<view class="tpf-product-thumb"><image class="image" :src="image"></image></view>
		<view class="tpf-promotion-detail">
			<view class="title"><text class="title-text">{{title}}</text></view>
			
			<view class="tpf-promotion-info">
				<view class="tpf-promotion-info-left">
					<view class="tpf-promotion-label">
						<text class="tpf-promotion-title">{{promotionLabel}}</text>
						<view class="tpf-promotion-tip">
							<text class="tpf-promotion-tip-label" v-if="promotionLabelTip" :style="promotionLabelTipStyle">{{promotionLabelTip}}</text> 
							<text class="tpf-promotion-tip-stock" v-if="seckillStock" :style="seckillStock">{{seckillStock}}</text>
							<text class="tpf-promotion-unit" v-if="unit" :style="unitStyle">{{unit}}</text>
						</view>
					</view>
					<view class="tpf-price-wrap">
						<tpl-price :price="price" :integerStyle="priceConfig.integerStyle"></tpl-price>
						<view class="tpf-market-price"><text class="market-price-text">￥:{{marketPrice}}</text></view>
					</view>
				</view>
				
				<text class="tpf-promotion-subscribe-btn" @tap.stop="promotionButtonTap(btn.id)" :style="btn.buttonStyle" v-for="(btn,btnIndex) of statusButtons" :key="'btn'+btnIndex" v-if="btn.id == status">{{btn.buttonText}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import config from './tpl-promotion-product.js';
	
	export default {
		name: 'TplPruductOne',
		mixins: [config],
		props: {
			url: {
				type: String,
				default: ''
			},
			id:{
				type: [Number, String],
				default:0
			},
			image: {
				type: String,
				required: true
			},
			title: {
				type: String,
			},
			price: {
				type: [Number, String],
				required: true,
			},
			marketPrice: {
				type: [Number, String],
				default:'0.00'
			},
			priceLabel: {
				type: String
			},
			status:{
				// 当前产品的状态   expired:无效   alive:进行中的    freeze:还为生效的
				type:[Number,String],
				default:'expired'
			},
			statusButtons:{
				type:Array,
				default:()=>{
					return [
						{
							id:"expired",
							buttonText:"已过期",
							buttonStyle:"",
						},
						{
							id:"alive",
							buttonText:"进行中",
							buttonStyle:"",
						},
						{
							id:"freeze",
							buttonText:"待生效",
							buttonStyle:"",
						}
					]
				}
			},
			productLabelList: {
				type: Array,
				// default: function () {
				// 	return ['自营', '超市'];
				// }
			},
			promotionLabel:{
				type:String,
				default:"抢购价"
			},
			commentCount: {
				type: [String, Number]
			},
			arrange:{
				// 产品排列方式：row 一行一列 ; col一行两列
				type:String,
				default:'row'
			},
			promotionLabelTip:{
				type: String
			},
			promotionLabelTipStyle:{
				type: String
			},
			seckillStock:{
				type: [String, Number],
				default:0
			},
			seckillStockStyle:{
				type: String
			},
			unit:{
				type: String,
			},
			unitStyle:{
				type: String
			},
		},
		computed: {
			commentCountInner() {
				const commentCount = Number(this.commentCount);
				if (commentCount < 10000) {
					return commentCount.toFixed(0);
				} else if (commentCount > 10000 && commentCount < 100000) {
					return (commentCount / 10000).toFixed(1) + '万+';
				} else if (commentCount > 100000) {
					return (commentCount / 10000).toFixed(0) + '万+';
				}
			},
		},
		methods:{
			promotionButtonTap(e){
				this.$emit("promotionButtonTap",e);
			}
		}
	}
</script>

<style lang="scss" scoped src="./tpl-promotion-product.scss"></style>